<template>
    <div class="list">
        <!-- <img src="@/assets/pic.jpg" alt=""> -->
        <div class="info" v-if="info">
            <img :src="info.goodsImg" alt="">
            <p class="desc">{{ info.goodsName }}</p>
            <p class="price">{{ info.goodsPrice }}</p>
        </div>

        <hr>
        <div>
            <h2>查看类似商品</h2>
            <div class="like">
                <router-link to="/detail?gid=100011530887">
                    <img src="//img12.360buyimg.com/n1/s400x400_jfs/t1/223985/37/5498/101546/6214480aEed4c98a7/1f924bc5c111f75e.jpg"
                        alt="">
                </router-link>

                <router-link to="/detail?gid=100019867468">
                    <img src="//img13.360buyimg.com/n1/s400x400_jfs/t1/144948/36/25942/105078/61b0d9edEf29edc6e/427749b0177fd113.jpg"
                        alt="">
                </router-link>
            </div>

        </div>
    </div>
</template>

<script>
/*  
    在Vue使用router插件之后, 同时绑定两个全局属性
        $router
        $route


    查看类似商品  需求=> 数据改变之后,详情页再次更新

    问题: 数据虽然改变了,但是视图并没有更新 (没有重新请求数据) 
    原因: 自己挑自己(DetailView), 组件被复用了, 没有重新初始化 => 不会再次发送请求

    解决办法: 
        数据确实改变了, 可以通过watch监听$route改变
*/

import axios from "axios";
export default {
    name: "DetailView",
    data() {
        return {
            gid: null,
            info: null,
            start: null,
            end: null,
        }
    },
    methods: {
        getGoodsInfo() {
            axios.get("http://121.43.116.41/demo/php/searchGoodsByGoodsId.php", {
                params: {
                    gid: this.gid,
                }
            }).then(responseOption => {
                console.log("响应配置对象", responseOption);
                if (responseOption.status == 200) {
                    return responseOption.data;
                }
            }).then(res => {
                /* 
                    服务器返回数据 (后端定义)
                    {
                        status: 数据增删改查成功/失败,
                        message:"操作提示信息",
                        list:[],  // 数组=>返回数据有多条就放到数组中
                        data:{},  // 如果返回数据时单条,一般放到data中
                    }
                */
                console.log("请求数据", res);

                if (res.status) {
                    this.info = res.data;
                }
            })
        }
    },
    watch: {
        // 监听$route改变 
        // $route:function(newVal){
        //     console.log("$route数据改变");
        //     this.gid = newVal.query.gid;
        // }

        // 监听$route.query的某个属性改变
        "$route.query.gid": function (newVal) {
            console.log("$route.query.gid改变");
            this.gid = newVal;
            this.getGoodsInfo();

        }
    },
    mounted() {
        console.log("11", this); // 当前Vue实例中的代理对象

        // this=>访问全局属性
        // console.log(this.$router);  // 路由实例,存储所有路由信息 
        // console.log(this.$route);   // 当前路由, 只存放当前url地址对应的路由信息
        // console.log(this.$author);   // 测试
        // console.log(this.$date);   // 测试
        // console.log(this.$);

        // console.log(this.$route.query);
        // let {gid} = this.$route.query;
        // if(gid){
        //     this.gid = gid;
        //     this.getGoodsInfo();
        // }


        // 判断用户是否登录

        console.log("111111", this.$lgc);

        if (this.$route.meta.requiresAuth) {
            if (this.$lgc) {
                let { gid } = this.$route.query;
                if (gid) {
                    this.gid = gid;
                    this.getGoodsInfo();
                }
            } else {
                // 跳转登录页
                // this.$router.push("/login")
                // this.$router.push({ path: "/login" })

                // 用户没有登录  1. 去登录  2. 将当前页面的路由信息(path)携带到登录页

                // 历史列表  /list -> /detail -> /login  -> /detail
                // this.$router.push({ path: "/login", query:{ReturnUrl: this.$route.fullPath} })


                // 历史列表  /list -> /detail 替换为 /login  替换为 /detail
                this.$router.replace({ path: "/login", query: { ReturnUrl: this.$route.fullPath } })


            }
        } else {
            let { gid } = this.$route.query;
            if (gid) {
                this.gid = gid;
                this.getGoodsInfo();
            }
        }

    },
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
    beforeRouteEnter(to, from, next) {
        // console.log("组件渲染之前");
        // console.log("to", to);
        // console.log("from", from);
        // console.log("this",this); 

        // next();

        let start = Date.now();  // 进入页面的时间

        // beforeRouteEnter中的next()可以接受一个回调函数, 该回调函数在组件挂载之后执行 => 回调函数有一个形参(当前组件的proxy代理对象)
        next(function (vm) {
            console.log("vm", vm);

            vm.start = start;
        })
    },

    // 当前页面跳转其他页面,离开之前触发  (相关组件可以控制是否允许用户离开当前页面)
    beforeRouteLeave(to, from, next) {
        // console.log("导航离开之前");
        // console.log("to", to);
        // console.log("from", from);
        // console.log("this", this);

        // this.end = Date.now();

        // if(this.end - this.start  >= 10*1000){
        //     next();
        // }else{
        //     if(confirm("任务未完成,无法领取奖励,是否继续")){
        //         next(false);
        //     }else{
        //         next();
        //     }
        // }
        next();

    },
    beforeRouteUpdate(to, from) {
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
        // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`

        console.log("导航跳转,组件被复用"); // 典型问题: 自己跳自己,只有数据部分改变
        console.log("to", to);
        console.log("from", from);
        console.log("this", this);
    },
}
</script>

<style lang="scss" scoped>
.info img {
    width: 100%;

}

.like {
    display: flex;
}

.like a {
    flex: 1;
    text-align: center;

    img {
        width: 80%;
    }
}
</style>